<template>
  <div class="comment-list">
    <!-- 商品评分 -->
    <GoodsRate />
    <!-- 遍历数据 -->
    <div class="border-bottom" v-for="comment in list" :key="comment.userId">
      <Comment :item="comment" />
    </div>
  </div>
</template>

<script>
import GoodsRate from './GoodsRate'
import Comment from './Comment'
import { fetchCommentList } from '@/api'

export default {
  data () {
    return {
      list: []
    }
  },

  async created () {
    this.list = await fetchCommentList()
  },

  components: {
    GoodsRate,
    Comment
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.comment-list {
  border-left: 1px solid @border-color2;
  border-right: 1px solid @border-color2;
  border-bottom: 1px solid @border-color2;
  padding-top: 28px;
  .border-bottom {
    border-bottom: 1px dashed @border-color2;
    &:last-child {
      border-bottom: 0px;
    }
  }
}
</style>
